<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="https://v3.bootcss.com/favicon.ico">
    <title>bootstrap表格样式</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="../css/starter-template.css" rel="stylesheet">
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>

    <!--<style>-->
        <!--div {-->
            <!--border: 1px #c9302c solid;-->
        <!--}-->
    <!--</style>-->
</head>
<!-- 表格样式 -->
<body>
<!-- container：作用相当于一个自动居中的容器(用的地方很多，不然样式可能难看) -->
<!-- 表格样式 -->
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <strong>给表格加样式的时候，先加基础样式，再加其他样式</strong>
            <br/>table-striped条纹样式
            <table class="table table-striped">
                <tr><th>序号</th><th>姓名</th><th>年龄</th><th>住址</th><th>邮箱</th><th>电话</th><th>国家</th><th>特色</th><th>住址</th></tr>
                <tr><td>1</td><td>王钦民</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>成都</td><td>成都</td></tr>
                <tr><td>2</td><td>花园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>美丽</td><td>成都</td></tr>
                <tr><td>3</td><td>果园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>静谧</td><td>成都</td></tr>
                <tr><td>4</td><td>庄园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>热闹</td><td>成都</td></tr>
                <tr><td>5</td><td>职业</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>发展</td><td>成都</td></tr>
            </table>
            <br/>table-bordered带边框样式，可以和条纹一起使用
            <table class="table table-bordered text-center">
                <tr><th class="text-center">序号</th><th class="text-center">姓名</th><th class="text-center">年龄</th><th class="text-center">住址</th><th class="text-center">邮箱</th><th class="text-center">电话</th><th class="text-center">国家</th><th class="text-center">特色</th><th class="text-center">住址</th></tr>
                <tr><td>1</td><td>王钦民</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>成都</td><td>成都</td></tr>
                <tr><td>2</td><td>花园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>美丽</td><td>成都</td></tr>
                <tr><td>3</td><td>果园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>静谧</td><td>成都</td></tr>
                <tr><td>4</td><td>庄园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>热闹</td><td>成都</td></tr>
                <tr><td>5</td><td>职业</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>发展</td><td>成都</td></tr>
            </table>

        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <strong>行样式（其实就是给行设置不同的颜色） .active .sucess .info, warning danger</strong>
            <br/>
            <table class="table table-condensed table-bordered">
                <tr><th class="text-center info">序号</th><th class="text-center">姓名</th><th class="text-center">年龄</th><th class="text-center">住址</th><th class="text-center">邮箱</th><th class="text-center">电话</th><th class="text-center">国家</th><th class="text-center">特色</th><th class="text-center">住址</th></tr>
                <tr class="info"><td>1</td><td>王钦民</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>成都</td><td>成都</td></tr>
                <tr class="success"><td>2</td><td>花园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>美丽</td><td>成都</td></tr>
                <tr class="active"><td>3</td><td>果园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>静谧</td><td>成都</td></tr>
                <tr class="warning"><td>4</td><td>庄园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>热闹</td><td>成都</td></tr>
                <tr class="danger"><td>5</td><td>职业</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>发展</td><td>成都</td></tr>
            </table>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <strong>紧凑 .table-condensed</strong>
            <br/>紧凑 .table-condensed
            <table class="table table-condensed table-bordered">
                <tr><th class="text-center">序号</th><th class="text-center">姓名</th><th class="text-center">年龄</th><th class="text-center">住址</th><th class="text-center">邮箱</th><th class="text-center">电话</th><th class="text-center">国家</th><th class="text-center">特色</th><th class="text-center">住址</th></tr>
                <tr><td>1</td><td>王钦民</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>成都</td><td>成都</td></tr>
                <tr><td>2</td><td>花园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>美丽</td><td>成都</td></tr>
                <tr><td>3</td><td>果园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>静谧</td><td>成都</td></tr>
                <tr><td>4</td><td>庄园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>热闹</td><td>成都</td></tr>
                <tr><td>5</td><td>职业</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>发展</td><td>成都</td></tr>
            </table>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <strong>悬停 .table-hover</strong>
            <br/>鼠标悬停效果table-hover
            <table class="table table-hover">
                <tr><th class="text-center">序号</th><th class="text-center">姓名</th><th class="text-center">年龄</th><th class="text-center">住址</th><th class="text-center">邮箱</th><th class="text-center">电话</th><th class="text-center">国家</th><th class="text-center">特色</th><th class="text-center">住址</th></tr>
                <tr><td>1</td><td>王钦民</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>成都</td><td>成都</td></tr>
                <tr><td>2</td><td>花园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>美丽</td><td>成都</td></tr>
                <tr><td>3</td><td>果园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>静谧</td><td>成都</td></tr>
                <tr><td>4</td><td>庄园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>热闹</td><td>成都</td></tr>
                <tr><td>5</td><td>职业</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>发展</td><td>成都</td></tr>
            </table>
        </div>
        <br/>
    </div>
    <div class="container table-responsive">
        响应式表格,必须 放在div里面
        <br/>
        <table class="table table-hover table-bordered">
            <tr><th class="text-center">序号</th><th class="text-center">姓名</th><th class="text-center">年龄</th><th class="text-center">住址</th><th class="text-center">邮箱</th><th class="text-center">电话</th><th class="text-center">国家</th><th class="text-center">特色</th><th class="text-center">住址</th></tr>
            <tr><td>1</td><td>王钦民</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>成都</td><td>成都</td></tr>
            <tr><td>2</td><td>花园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>美丽</td><td>成都</td></tr>
            <tr><td>3</td><td>果园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>静谧</td><td>成都</td></tr>
            <tr><td>4</td><td>庄园</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>热闹</td><td>成都</td></tr>
            <tr><td>5</td><td>职业</td><td>24</td><td>成都</td><td>zh_xh@live.com</td><td>15228119181</td><td>中国</td><td>发展</td><td>成都</td></tr>
        </table>
    </div>
</div>
</body>
</html>